﻿@{
    ViewBag.Title = "Dialog";
    Layout = "~/Views/Shared/_JmPage.cshtml";
}

<h2>Dialog</h2>

<!-- First Page -->
<div data-role="page" id="home">
	<div data-role="header">
		<h1>Dialog Example</h1>
	</div>

	<div data-role="content">
		<a href="#terms" data-transition="slidedown">Terms and Conditions</a>  	
	</div>
</div>

<!-- Second Page/Dialog -->
<div data-role="dialog" id="terms">
	<div data-role="header">
		<h1>Terms and Conditions</h1>
	</div>
	
	<div data-role="content" data-theme="c">	
		Do you agree to these terms?
		<br><br>
		<a href="#home" data-role="button" data-inline="true" data-rel="back" data-theme="a">Disagree</a>		
		<a href="javascript:agree();" data-role="button" data-inline="true">Agree</a>
	</div>
</div>

<script type="text/javascript">
	function agree() {
		// process dialog...
			
		// close dialog
		$('.ui-dialog').dialog('close');
	}
</script>

